var scene, light,
  camera1, camera2, camera3, camera4,
  mesh1, mesh2, mesh3, mesh4,
  renderer1, renderer2, renderer3, renderer4,
  container1, container2, container3, container4;
var status, monitor;
var cameraParams = {};
var width, height, loadManager, objLoader;
function initEnv() {
  width = document.getElementById("container1").clientWidth;
  height = document.getElementById("container1").clientHeight;
  loadManager = new THREE.LoadingManager();
  objLoader = new THREE.OBJLoader(loadManager);

  container1 = document.getElementById("container1");
  container2 = document.getElementById("container2");
  container3 = document.getElementById("container3");
  container4 = document.getElementById("container4");
  scene = new THREE.Scene();
  camera1 = new THREE.PerspectiveCamera(45, width / height, 1, 100);
  camera2 = new THREE.PerspectiveCamera(45, width / height, 1, 100);
  camera3 = new THREE.PerspectiveCamera(45, width / height, 1, 100);
  camera4 = new THREE.PerspectiveCamera(45, width / height, 1, 100);

  light = new THREE.DirectionalLight(0xffffff);
  light.position.set(0, 0, 1).normalize();
  renderer1 = new THREE.WebGLRenderer({ antialias: false });
  renderer2 = new THREE.WebGLRenderer({ antialias: false });
  renderer3 = new THREE.WebGLRenderer({ antialias: false });
  renderer4 = new THREE.WebGLRenderer({ antialias: false });
  renderer1.setSize(width, height);
  renderer2.setSize(width, height);
  renderer3.setSize(width, height);
  renderer4.setSize(width, height);

  camera1 = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
  camera1.setViewOffset(width, 250, 0, 0, width, height);
  camera1.position.z = 1800;

  camera2 = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
  camera2.setViewOffset(width, height, 0, 0, width, height);
  camera2.position.x = 1800;


  camera3 = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
  camera3.setViewOffset(width, height, 0, 0, width, height);
  camera3.position.y = 1800;
  camera3.up.set(0, 0, 1);

  camera4 = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
  camera4.setViewOffset(width, height, 0, 0, width, height);
  camera4.position.z = 800;
  camera4.position.x = 300;

  scene.add(light);
  console.log("scene", scene)
  container1.appendChild(renderer1.domElement);
  container2.appendChild(renderer2.domElement);
  container3.appendChild(renderer3.domElement);
  container4.appendChild(renderer4.domElement);
}

function initStatus() {
  stats = new Stats();
  stats.domElement.style.position = "absolute";
  stats.domElement.style.top = "0px";
  document.body.appendChild(stats.domElement);
}

function initObj() {
  var canvas = document.createElement('canvas');
  canvas.width = 128;
  canvas.height = 128;

  var context = canvas.getContext('2d');
  var gradient = context.createRadialGradient(
    canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2
  );
  gradient.addColorStop(0.1, 'rgba(210,210,210,1)');
  gradient.addColorStop(1, 'rgba(255,255,255,1)');

  context.fillStyle = gradient;
  context.fillRect(0, 0, canvas.width, canvas.height);

  var shadowTexture = new THREE.Texture(canvas);
  shadowTexture.needsUpdate = true;

  var shadowMaterial = new THREE.MeshBasicMaterial({ map: shadowTexture });
  var shadowGeo = new THREE.PlaneGeometry(300, 300, 1, 1);

  var mesh = new THREE.Mesh(shadowGeo, shadowMaterial);
  mesh.position.y = - 250;
  mesh.rotation.x = - Math.PI / 2;
  scene.add(mesh);

  mesh = new THREE.Mesh(shadowGeo, shadowMaterial);
  mesh.position.x = - 400;
  mesh.position.y = - 250;
  mesh.rotation.x = - Math.PI / 2;
  scene.add(mesh);

  mesh = new THREE.Mesh(shadowGeo, shadowMaterial);
  mesh.position.x = 400;
  mesh.position.y = - 250;
  mesh.rotation.x = - Math.PI / 2;
  scene.add(mesh);

  var faceIndices = ['a', 'b', 'c', 'd'];

  var color, f1, f2, f3, p, n, vertexIndex,
    radius = 200,
    geometry1 = new THREE.IcosahedronGeometry(radius, 1),
    geometry2 = new THREE.IcosahedronGeometry(radius, 1),
    geometry3 = new THREE.IcosahedronGeometry(radius, 1);

  for (var i = 0; i < geometry1.faces.length; i++) {

    f1 = geometry1.faces[i];
    f2 = geometry2.faces[i];
    f3 = geometry3.faces[i];

    n = (f1 instanceof THREE.Face3) ? 3 : 4;

    for (var j = 0; j < n; j++) {

      vertexIndex = f1[faceIndices[j]];

      p = geometry1.vertices[vertexIndex];

      color = new THREE.Color(0xffffff);
      color.setHSL((p.y / radius + 1) / 2, 1.0, 1.0);

      f1.vertexColors[j] = color;

      color = new THREE.Color(0xffffff);
      color.setHSL(0.0, (p.y / radius + 1) / 2, 1.0);

      f2.vertexColors[j] = color;

      color = new THREE.Color(0xffffff);
      color.setHSL(0.125 * vertexIndex / geometry1.vertices.length, 1.0, 1.0);

      f3.vertexColors[j] = color;
    }
  }

  var materials = [
    new THREE.MeshLambertMaterial({ color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors }),
    new THREE.MeshBasicMaterial({ color: 0x000000, shading: THREE.FlatShading, wireframe: true, transparent: true })
  ];

  group1 = THREE.SceneUtils.createMultiMaterialObject(geometry1, materials);
  group1.position.x = -400;
  group1.rotation.x = -1.87;
  scene.add(group1);

  group2 = THREE.SceneUtils.createMultiMaterialObject(geometry2, materials);
  group2.position.x = 400;
  group2.rotation.x = 0;
  scene.add(group2);

  group3 = THREE.SceneUtils.createMultiMaterialObject(geometry3, materials);
  group3.position.x = 0;
  group3.rotation.x = 0;
  scene.add(group3);
}

function render() {
  camera1.lookAt(scene.position);
  camera2.lookAt(scene.position);
  camera3.lookAt(scene.position);
  camera4.lookAt(scene.position);

  renderer1.render(scene, camera1);
  renderer2.render(scene, camera2);
  renderer3.render(scene, camera3);
  renderer4.render(scene, camera4);
}

function animate() {
  stats.update();
  render();
  requestAnimationFrame(animate);
}

function init() {
  initEnv();
  initStatus();
  initObj();
}

function main() {
  init();
  animate();
}